const path = require('path')
module.exports = {
    entry: './index.js',//需要处理的入口文件
    output: {
        filename: "index.js",//自定义打包后的文件名称
        path: path.resolve(__dirname, 'dist'),//自定义名称dist
        // assetModuleFilename:"img/[name].[hash:10][ext]"//配合asset打包图片使用webpack5自带 全局
    },
    module: {
        rules: [

            {
                test: /\.css$/i, 
                use: [
                    'style-loader',
                    'css-loader',
                    // {
                    //     loader: 'css-loader',
                    //     options: {
                    //         importLoaders:1,//默认是0 1则表示css里面中 有引入的import 再次进行postcss-loader
                    //     }
                    // },
                ]
            },
            {
                //webpack5不需要使用file-loading url-loader等 有自带的功能
                /*
                     type:'asset/resource',  等于file-loader
                     type:'asset.inline' //等于url-loader 默认全部转成base64
                     type:'asset' 整合ur-loader file-loader
                */
                test: /\.(png|svg|gif|jpe?g)/,
                type: 'asset',
                  generator: {//处理图片路径
                    filename:"img/[name].[hash:10][ext]"
                },
                parser: {
                    dataUrlCondition: {
                        maxSize:8 * 1024
                    }
                }
            },
            // //处理图标
            // {
            //     //webpack5不需要使用file-loading url-loader等 有自带的功能
            //     test: /\.(ttf|woff2?|gif)/,
            //     type: 'asset/resource',
            //       generator: {//处理图片路径
            //         filename:"font/[name].[hash:10][ext]"
            //     },
            // },
        ]
    },
}